<template>
  <steps :active="active">
    <step description="这是一段很长很长很长的描述性文字">步骤一</step>
    <step description="这是一段很长很长很长的描述性文字">步骤二</step>
    <step description="这是一段很长很长很长的描述性文字">步骤三</step>
    <step description="这是一段很长很长很长的描述性文字">步骤四</step>
  </steps>
  <button @click="nextStep">下一步</button>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import Step from "../lib/StepLib.vue";
import Steps from "../lib/StepsLib.vue";

export default defineComponent({
  components: { Step, Steps },
  setup() {
    const active = ref(3);
    const nextStep = () => {
      active.value === 4 ? (active.value = 0) : (active.value += 1);
    };
    return { active, nextStep };
  },
});
</script>
<style lang="scss" scoped>
button {
  margin: 20px;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
}
</style>
